<template>
	<view class="container">
		<view class="bar"></view>
		<view class="content">
			<view class="message">
				<span>收货人</span>
				<input type="text" placeholder="请填写收货人姓名" v-model="addressData.name">
			</view>
			<view  class="sex">
				<radio-group @change="radioChange">
					<label class="sex" v-for="(item, index) in sex" :key="item.value" >
						<radio :value="item.value" :checked="item.checked" color="#F41640" style="transform:scale(0.7)"/>
						<span>{{item.label}}</span>
					</label>
				</radio-group>
			</view>
			<view class="message">
				<span>手机号码</span>
				<input type="text" placeholder="请填写收货人手机号" v-model="addressData.phone">
				<image class="plus" src="../../static/image/book-plus.png"></image>
				<span class="book" style="color: #F13053;">通讯录</span>
			</view>
			<view class="message">
				<span>收货地址</span>
				<input type="text" placeholder="     点击选择收货地址" v-model="addressData.address">
				<image class="add" src="../../static/image/address-add.png"></image>
			</view>
			<view class="message">
				<span>楼号门牌</span>
				<input type="text" placeholder="详细地址，列如：3号楼二单元105" v-model="addressData.detailAddress">
			</view>
			<view class="set-default">
				<view class="set">
					<view style="font-size: 28rpx; font-weight: bold;">设为默认地址</view>
					<view style="font-size: 24rpx; color: #999999; font-weight: 400;">每次购物时会优先定位至该地址，方便您轻松购物</view>
				</view>
				<view class="set-btn">
					<ss-switch v-model="addressData.defaultAddress" scale="0.8" selColor="#15E85B"></ss-switch>
				</view>
			</view>
			<button @click="submit"><span>保存收货地址</span></button>
		</view>	
	</view>
</template>

<script>
	import ssSwitch from "../../components/ss-switch/ss-switch.vue" 
	export default{
		data(){
			return{
				sex: [{
						label: "女士",
						value: "0",
						checked: true
					}, {
						label: "先生",
						value: "1"
					}],
				addressData:{
					name:"",
					sex:"0",
					phone:"",
					address:"",
					detailAddress:"",
					defaultAddress:""
				},
				switchValue: true
			}
		},
		components:{
		            ssSwitch
		        },
		methods: {
			 radioChange(e) {
				this.addressData.sex = e.detail.value
				// console.log(this.addressData.sex)
			},
			submit(){
				// if(this.addressData.name==""||this.addressData.phone==""||this.addressData.address==""){
				// 	alert("滚傻逼没内容 你点尼玛呢")	
				// }else if(this.addressData.phone.length!==11){
				// 	alert("逼没内容 你呢")
				// }
				// else{
					console.log(this.addressData)
				// }
				
			}
		}
	}
	
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.bar{
	    height: 20rpx;
		background-color: #F5F5F5;
	}
	.message{
		display: flex;
		position: relative;
	}
	.message span{
		font-size: 28rpx;
		font-weight: bold;
		color: #1A1A1A;
		line-height: 86rpx;
		margin: 0 20rpx;
	}
	.message input{
		width: 567rpx;
		height: 86rpx;
		position: absolute;
		right: 25rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #F5F5F5;
	}
	.sex{
		width: 567rpx;
		height: 86rpx;
		margin-left: 158rpx;
		border-bottom: 1rpx solid #F5F5F5;
	}
	.sex label{
		line-height: 86rpx;
		margin: 0 10rpx;
	}
	.sex span{
		width: 133rpx;
		font-weight: 400;
		color: #999999;
		margin-right: 47rpx;
	}
	.book{
		position: absolute;
		right: 30rpx;
	}
	.plus{
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 50%;
		right: 134rpx;
		margin-top: -25rpx;
	}
	.add{
		width: 18rpx;
		height: 24rpx;
		position: absolute;
		top: 50%;
		left: 22.8%;
		margin-top: -12rpx;
	}
	.set-default{
		display: flex;
		margin: 33rpx 24rpx;
		position: relative;
	}
	.set-btn{
		position: absolute;
		top: 50%;
		right: 0;
	}
	button{
		width: 701rpx;
		height: 68rpx;
		margin: 70rpx auto;
		line-height: 68rpx;
		font-size: 30rpx;
		background: #F13858;
		color: #FFFFFF;
	}
</style>
		